{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湘行 - 我的行程</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入具有湘西特色的字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B4513', // 木质建筑棕 - 主色调
                        secondary: '#9E2A2B', // 苗族服饰红 - 辅助色
                        accent: '#1A3A59', // 蜡染蓝
                        wood: '#D2B48C', // 木色
                        light: '#F5F1E9', // 米白色底
                        dark: '#2F4F4F', // 沱江青绿色
                    },
                    fontFamily: {
                        display: ['"Ma Shan Zheng"', 'cursive'],
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .wood-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d2b48c' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .miao-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239e2a2b' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
        }
    </style>
    <style>
    :root {
        --primary-brown: #8B4513; /* 木质建筑棕 */
        --primary-green: #2F4F4F; /* 沱江青绿色 */
        --accent-red: #9E2A2B; /* 苗族服饰红 */
        --accent-blue: #1A3A59; /* 蜡染蓝 */
        --light-bg: #F5F1E9; /* 米白色底 */
        --wood-tone: #D2B48C; /* 木色边框 */
    }

    .sub-header{
        height: 70px;
        background-image: url("{% static 'img/border-pattern.png' %}"); /* 苗族织锦边框 */
        background-repeat: repeat-x;
        background-position: bottom;
        background-size: 120px 8px;
    }
    .container{
        width: 1128px;
        margin: 0 auto;
    }
    .sub-header .logo{
        width: 234px;
        height: 70px;
        float: left;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .sub-header .logo a{
        color: var(--primary-brown);
        text-decoration: none;
    }
    .sub-header .menu-list{
        float: left;
        height: 70px;
        line-height: 70px;
    }
    .sub-header .menu-list a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
        position: relative;
        font-weight: 500;
    }
    .sub-header .menu-list a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10px;
        width: 0;
        height: 2px;
        background-color: var(--accent-red);
        transition: width 0.3s;
    }
    .sub-header .menu-list a:hover{
        color: var(--accent-red);
    }
    .sub-header .menu-list a:hover::after {
        width: calc(100% - 20px);
    }
    .sub-header .logon{
        float: right;
        height: 70px;
        line-height: 70px;
        display: flex;
        align-items: center; /* 确保按钮垂直居中 */
    }
    .sub-header .logon a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
    }
    .sub-header .logon a:hover{
        color: var(--accent-red);
    }
    .sub-header .name{
        color: var(--primary-brown);
        font-size: 24px;
        font-family: "Ma Shan Zheng", cursive;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    /* 湘西风格装饰元素 */
    .miao-border {
        position: relative;
    }
    .miao-border::before, .miao-border::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border-color: var(--wood-tone);
        border-style: solid;
        opacity: 0.6;
    }
    .miao-border::before {
        top: -5px;
        left: -5px;
        border-width: 2px 0 0 2px;
    }
    .miao-border::after {
        bottom: -5px;
        right: -5px;
        border-width: 0 2px 2px 0;
    }

    /* 木质按钮效果 */
    .wood-btn {
        position: relative;
        overflow: hidden;
        background-image: linear-gradient(135deg, var(--wood-tone), #E6C895, var(--wood-tone));
        border: 1px solid #c8a97e;
        box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
    }
    .wood-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: all 0.6s ease;
    }
    .wood-btn:hover::after {
        left: 100%;
    }

    /* 蜡染风格按钮 */
    .batik-btn {
        background-color: var(--accent-blue);
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        border: 1px solid #2a4a6d;
    }
    .batik-btn:hover {
        background-color: #234b74;
    }

    /* 行程计划样式 */
    .itinerary-day {
        border-left: 2px solid var(--wood-tone);
        padding-left: 20px;
        margin-left: 10px;
        position: relative;
    }
    .itinerary-day::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--primary);
    }

    /* 评价星级样式 */
    .star-rating {
        color: #ddd;
        font-size: 1.2rem;
        position: relative;
        display: inline-block;
    }
    .star-rating::before {
        content: "★★★★★";
    }
    .star-fill {
        position: absolute;
        top: 0;
        left: 0;
        color: #FFD700;
        overflow: hidden;
    }

    /* 用户菜单样式 - 修复下拉框显示问题 */
    .user-menu-container {
        position: relative;
        display: inline-block;
        margin-left: 10px;
        z-index: 100; /* 确保下拉框在其他元素上方 */
    }

    .user-avatar {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        border: 2px solid var(--wood-tone);
        cursor: pointer;
        vertical-align: middle;
        transition: transform 0.3s ease;
    }

    .user-avatar:hover {
        transform: scale(1.05);
    }

    .user-dropdown-menu {
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 5px;
        width: 180px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        list-style: none;
        padding: 5px 0;
        z-index: 101; /* 确保下拉框在容器上方 */
        display: none;
        border: 1px solid var(--wood-tone);
    }

    .user-dropdown-menu.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .user-dropdown-menu li a {
        display: block;
        padding: 10px 15px;
        color: var(--primary-brown);
        text-decoration: none;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .user-dropdown-menu li a:hover {
        background-color: var(--light-bg);
        color: var(--accent-red);
    }

    .user-dropdown-menu .divider {
        height: 1px;
        background-color: var(--wood-tone);
        margin: 5px 0;
    }

    .user-dropdown-menu .logout {
        color: var(--accent-red);
    }

    .user-dropdown-menu .logout:hover {
        background-color: rgba(158, 42, 43, 0.1);
    }

    /* 登录注册按钮样式 */
    .login-btn, .register-btn {
        border: 1px solid var(--primary);
        border-radius: 4px;
        padding: 5px 15px !important;
        margin-right: 5px;
        color: var(--primary-brown) !important;
        background-color: transparent !important;
    }

    .login-btn:hover, .register-btn:hover {
        background-color: var(--primary-brown) !important;
        color: white !important;
    }

    /* 移动端菜单样式 */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 250px;
        height: 100vh;
        background-color: white;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        z-index: 50;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        padding-top: 80px;
    }

    .mobile-menu a {
        display: block;
        padding: 15px 20px;
        color: var(--primary-brown);
        border-bottom: 1px solid var(--light-bg);
    }

    .mobile-menu a.active {
        background-color: var(--light-bg);
        color: var(--accent-red);
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 49;
        display: none;
    }

    #close-mobile-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 20px;
        color: var(--primary-brown);
        background: none;
        border: none;
        cursor: pointer;
    }
</style>
</head>
<body class="bg-light wood-pattern text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
<header class="sub-header clearfix">
    <div class="container">
        <div class="logo">
            <a href="/search/">
                <a>
                    <!-- 替换为吊脚楼图标 -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                        <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
                    </svg>
                </a>
                <span class="name">湘行</span>
            </a>
        </div>
        <div class="menu-list">
            <a href="/search/">首页</a>
            <a href="/user/strategy/">攻略笔记</a>

            <a href="/travel/group/">旅游团</a>
            <a href="{% url 'house' %}">酒店/民宿</a>
            <a href="{% url 'travel' %}">出行</a>
            <a href="{% url 'itinerary' %}">我的行程</a>
        </div>
        <div class="logon">
            <!-- 使用Django模板条件判断用户登录状态 -->
            {% if user.is_authenticated %}
                <!-- 用户已登录时显示用户菜单 -->
                <a href="/user/message/reminder/" class="relative">
                    <i class="fa fa-bell-o"></i>
                </a>
                <div class="user-menu-container">
                    <a class="user-menu-trigger">
                        <span class="user-avatar" style="background-image: url('{% static 'img/4.jpg' %}');"></span>
                        <span>{{ user.username }}</span>
                    </a>
                    <ul class="user-dropdown-menu">
                        <li><a href="/user/profile/">个人中心</a></li>
                        <li><a href="/user/collections/">我的收藏</a></li>
                        <li><a href="/itinerary/">我的行程</a></li>
                        <li><a href="/user/settings/">设置</a></li>
                        <li class="divider"></li>
                        <li><a href="/user/logout/" class="logout">退出登录</a></li>
                    </ul>
                </div>
            {% else %}
                <!-- 用户未登录时显示登录注册按钮 -->
                <a href="/user/login/">登录</a>
                <a href="/register/">注册</a>
                <a href="#" class="relative">
                    <i class="fa fa-bell-o"></i>
                </a>
            {% endif %}
        </div>
    </div>
</header>


                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-primary hover:text-secondary" id="mobile-menu-button">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="md:hidden mobile-menu" id="mobile-menu">
            <button id="close-mobile-menu">
                <i class="fa fa-times"></i>
            </button>
            <a href="/search/">首页</a>
            <a href="/user/strategy/">攻略笔记</a>

            <a href="/travel/group/">旅游团</a>
            <a href="{% url 'house' %}" class="active">酒店/民宿</a>
            <a href="{% url 'travel' %}">出行</a>
            <a href="{% url 'itinerary' %}">我的行程</a>
        </div>
        <div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h1 class="text-[clamp(1.8rem,3vw,2.5rem)] font-display text-primary relative inline-block">
                我的湘西行程
                <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-20 h-1 bg-wood"></span>
            </h1>
            <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">记录您在湘西的每一段旅程，管理您的订单与收藏，让旅行更加从容自在</p>
        </div>

        <div class="flex flex-col md:flex-row gap-6">
            <!-- 左侧导航 -->
            <aside class="w-full md:w-64 shrink-0">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden miao-border">
                    <div class="p-4 border-b border-neutral-200 bg-primary/5">
                        <h2 class="text-lg font-semibold text-primary">我的行程管理</h2>
                    </div>
                    <nav class="p-2">
                        <a href="#orders" class="flex items-center px-4 py-3 text-primary bg-primary/10 rounded-lg mb-1 font-medium transition-custom">
                            <i class="fa fa-list-alt w-5 text-center mr-3"></i>
                            我的订单
                        </a>
                        <a href="#collections" class="flex items-center px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg mb-1 transition-custom">
                            <i class="fa fa-heart-o w-5 text-center mr-3"></i>
                            我的收藏
                        </a>
                        <a href="#itineraries" class="flex items-center px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg mb-1 transition-custom">
                            <i class="fa fa-map-o w-5 text-center mr-3"></i>
                            我的旅行计划
                        </a>
                        <a href="#reviews" class="flex items-center px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg mb-1 transition-custom">
                            <i class="fa fa-comment-o w-5 text-center mr-3"></i>
                            我的评价
                        </a>
                    </nav>

                    <!-- 湘西旅行小贴士 -->
                    <div class="p-4 bg-light miao-pattern">
                        <h3 class="text-sm font-semibold text-primary mb-2">湘西旅行小贴士</h3>
                        <p class="text-xs text-neutral-600 mb-2">• 山区昼夜温差大，建议携带外套</p>
                        <p class="text-xs text-neutral-600 mb-2">• 尊重当地苗族、土家族习俗</p>
                        <p class="text-xs text-neutral-600">• 部分景点需提前预约，建议提前安排</p>
                    </div>
                </div>
            </aside>

            <!-- 右侧内容区 -->
            <div class="flex-grow">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden miao-border min-h-[500px]">
                    <!-- 订单内容区域 -->
                    <div id="orders-content" class="p-6">
                        <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
                            <i class="fa fa-list-alt mr-2 text-wood"></i>我的订单
                        </h2>

                        <!-- 订单类型筛选 -->
                        <div class="flex flex-wrap gap-2 mb-8 border-b border-neutral-200 pb-3">
                            <button class="px-4 py-2 text-primary border-b-2 border-primary font-medium transition-custom" data-filter="all">全部订单</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="ticket">机票订单</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="hotel">酒店订单</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="travel">旅游订单</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="train">火车票订单</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="attraction">景点门票</button>
                        </div>

                        <!-- 订单列表 -->
                        <div class="space-y-6">
                            <!-- 新增：机票订单 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom order-item" data-category="ticket">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <span class="text-sm text-neutral-500">订单编号：</span>
                                        <span class="text-sm font-medium">OD20230814008</span>
                                    </div>
                                    <div class="text-sm text-secondary font-medium">待出行</div>
                                </div>
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://picsum.photos/id/1059/120/80" alt="中国国际航空" class="w-full md:w-32 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">中国国际航空 CA1852</h3>
                                            <div class="flex flex-wrap items-center gap-x-6 gap-y-2 mb-3">
                                                <div>
                                                    <span class="text-xl font-bold text-neutral-700">北京首都</span>
                                                    <span class="text-sm text-neutral-500 ml-1">PEK</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <div class="w-20 h-0.5 bg-wood/30 relative">
                                                        <div class="absolute top-0 right-0 w-3 h-3 bg-primary rounded-full -mt-1.5"></div>
                                                    </div>
                                                    <span class="mx-2 text-sm text-neutral-500">2h30m</span>
                                                </div>
                                                <div>
                                                    <span class="text-xl font-bold text-neutral-700">长沙黄花</span>
                                                    <span class="text-sm text-neutral-500 ml-1">CSX</span>
                                                </div>
                                            </div>
                                            <div class="flex flex-wrap gap-x-8 gap-y-2 text-sm text-neutral-500">
                                                <div>
                                                    <span>日期：2023-08-28</span>
                                                </div>
                                                <div>
                                                    <span>时间：09:30 - 12:00</span>
                                                </div>
                                                <div>
                                                    <span>座位：经济舱 Y舱</span>
                                                </div>
                                            </div>
                                            <div class="flex flex-wrap gap-2 mt-3">
                                                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded">成人票 x 2</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">电子客票</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">含免费托运行李额20kg</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 border-t border-neutral-100">
                                        <div class="text-sm text-neutral-500 mb-3 sm:mb-0">
                                            <span>总价：</span>
                                            <span class="text-lg font-semibold text-neutral-700 ml-1">¥2,160</span>
                                        </div>
                                        <div class="flex gap-3">
                                            <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
                                                查看详情
                                            </button>
                                            <button class="px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                                                在线值机
                                            </button>
                                            <button class="px-4 py-2 wood-btn text-primary rounded-md hover:opacity-90 transition-colors">
                                                下载行程单
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 新增：旅游订单 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom order-item" data-category="travel">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <span class="text-sm text-neutral-500">订单编号：</span>
                                        <span class="text-sm font-medium">OD20230813012</span>
                                    </div>
                                    <div class="text-sm text-secondary font-medium">待出行</div>
                                </div>
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://picsum.photos/id/1039/120/80" alt="张家界-凤凰古城5日游" class="w-full md:w-32 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">【纯玩无购物】张家界-凤凰古城5日深度游</h3>
                                            <p class="text-sm text-neutral-500 mb-2">出行日期：2023-08-29 至 2023-09-02</p>
                                            <div class="flex flex-wrap gap-2 mb-3">
                                                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded">成人 x 2</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">含住宿</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">含门票</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">含交通</span>
                                            </div>
                                            <div class="flex items-center text-sm text-neutral-500">
                                                <i class="fa fa-user-circle-o mr-1"></i>
                                                <span>导游：李导 138-xxxx-5678</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 border-t border-neutral-100">
                                        <div class="text-sm text-neutral-500 mb-3 sm:mb-0">
                                            <span>总价：</span>
                                            <span class="text-lg font-semibold text-neutral-700 ml-1">¥4,580</span>
                                        </div>
                                        <div class="flex gap-3">
                                            <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
                                                查看行程
                                            </button>
                                            <button class="px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                                                联系导游
                                            </button>
                                            <button class="px-4 py-2 batik-btn text-white rounded-md hover:bg-accent/90 transition-colors">
                                                下载合同
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 新增：天门山国家森林公园门票订单 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom order-item" data-category="attraction">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <span class="text-sm text-neutral-500">订单编号：</span>
                                        <span class="text-sm font-medium">OD20230814005</span>
                                    </div>
                                    <div class="text-sm text-secondary font-medium">待出行</div>
                                </div>
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/55a452dedd2c4e02a067f0c55844e8c4.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1755778193&x-signature=ZplajTTNG3awV2eOE3raNEBImkA%3D" alt="天门山国家森林公园" class="w-full md:w-32 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">天门山国家森林公园门票</h3>
                                            <p class="text-sm text-neutral-500 mb-2">使用日期：2023-08-25</p>
                                            <div class="flex flex-wrap gap-2">
                                                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded">成人票 x 1</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">电子票</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 border-t border-neutral-100">
                                        <div class="text-sm text-neutral-500 mb-3 sm:mb-0">
                                            <span>总价：</span>
                                            <span class="text-lg font-semibold text-neutral-700 ml-1">¥258</span>
                                        </div>
                                        <div class="flex gap-3">
                                            <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
                                                查看详情
                                            </button>
                                            <button class="px-4 py-2 wood-btn text-primary rounded-md hover:opacity-90 transition-colors">
                                                去使用
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 订单1：张家界国家森林公园门票 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom order-item" data-category="attraction">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <span class="text-sm text-neutral-500">订单编号：</span>
                                        <span class="text-sm font-medium">OD20230814001</span>
                                    </div>
                                    <div class="text-sm text-secondary font-medium">待出行</div>
                                </div>
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://picsum.photos/id/1036/120/80" alt="张家界国家森林公园" class="w-full md:w-32 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">张家界国家森林公园门票</h3>
                                            <p class="text-sm text-neutral-500 mb-2">使用日期：2023-08-20</p>
                                            <div class="flex flex-wrap gap-2">
                                                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded">成人票 x 2</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">电子票</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 border-t border-neutral-100">
                                        <div class="text-sm text-neutral-500 mb-3 sm:mb-0">
                                            <span>总价：</span>
                                            <span class="text-lg font-semibold text-neutral-700 ml-1">¥340</span>
                                        </div>
                                        <div class="flex gap-3">
                                            <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
                                                查看详情
                                            </button>
                                            <button class="px-4 py-2 wood-btn text-primary rounded-md hover:opacity-90 transition-colors">
                                                去使用
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 订单2：凤凰古城客栈 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom order-item" data-category="hotel">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <span class="text-sm text-neutral-500">订单编号：</span>
                                        <span class="text-sm font-medium">OD20230812045</span>
                                    </div>
                                    <div class="text-sm text-green-500 font-medium">已完成</div>
                                </div>
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://picsum.photos/id/1031/120/80" alt="凤凰古城客栈" class="w-full md:w-32 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">凤凰古城临江精品客栈</h3>
                                            <p class="text-sm text-neutral-500 mb-2">入住：2023-08-15 离店：2023-08-17</p>
                                            <div class="flex flex-wrap gap-2">
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">临江大床房</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">2晚</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 border-t border-neutral-100">
                                        <div class="text-sm text-neutral-500 mb-3 sm:mb-0">
                                            <span>总价：</span>
                                            <span class="text-lg font-semibold text-neutral-700 ml-1">¥560</span>
                                        </div>
                                        <div class="flex gap-3">
                                            <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
                                                查看详情
                                            </button>
                                            <button class="px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                                                写评价
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 订单3：高铁票 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom order-item" data-category="train">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <span class="text-sm text-neutral-500">订单编号：</span>
                                        <span class="text-sm font-medium">OD20230810022</span>
                                    </div>
                                    <div class="text-sm text-neutral-400 font-medium">已取消</div>
                                </div>
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://picsum.photos/id/1061/120/80" alt="长沙至张家界高铁" class="w-full md:w-32 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">长沙南 → 张家界西 G6402</h3>
                                            <p class="text-sm text-neutral-500 mb-2">2023-08-18 08:30 - 10:45</p>
                                            <div class="flex flex-wrap gap-2">
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">二等座 x 2</span>
                                                <span class="text-xs bg-neutral-100 text-neutral-500 px-2 py-1 rounded">取消原因：行程变更</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 border-t border-neutral-100">
                                        <div class="text-sm text-neutral-500 mb-3 sm:mb-0">
                                            <span>总价：</span>
                                            <span class="text-lg font-semibold text-neutral-700 ml-1">¥240</span>
                                            <span class="text-xs text-neutral-400 ml-2">已退款</span>
                                        </div>
                                        <div>
                                            <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
                                                查看详情
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div class="mt-8 flex justify-center">
                            <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-left text-xs"></i>
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-primary text-sm font-medium text-white">
                                    1
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                    2
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                    3
                                </a>
                                <span class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700">
                                    ...
                                </span>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                    8
                                </a>
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-right text-xs"></i>
                                </a>
                            </nav>
                        </div>
                    </div>

                    <!-- 收藏内容区域 -->
                    <div id="collections-content" class="p-6 hidden">
                        <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
                            <i class="fa fa-heart-o mr-2 text-wood"></i>我的收藏
                        </h2>

                        <!-- 收藏类型筛选 -->
                        <div class="flex flex-wrap gap-2 mb-8 border-b border-neutral-200 pb-3">
                            <button class="px-4 py-2 text-primary border-b-2 border-primary font-medium" data-filter="all">全部收藏</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-colors" data-filter="attraction">景点</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-colors" data-filter="hotel">酒店</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-colors" data-filter="food">美食</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-colors" data-filter="guide">攻略</button>
                        </div>

                        <!-- 收藏列表 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 收藏1：天门山国家森林公园（景点） -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom flex flex-col collection-item" data-category="attraction">
                                <div class="relative">
                                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/55a452dedd2c4e02a067f0c55844e8c4.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1755778193&x-signature=ZplajTTNG3awV2eOE3raNEBImkA%3D" alt="天门山国家森林公园" class="w-full h-48 object-cover">
                                    <button class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-secondary hover:bg-white transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <div class="p-4 flex-grow">
                                    <div class="flex items-center mb-2">
                                        <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded">景点</span>
                                        <div class="ml-auto flex items-center text-amber-400 text-sm">
                                            <i class="fa fa-star"></i>
                                            <span class="text-neutral-600 ml-1">4.8</span>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-primary mb-1">天门山国家森林公园</h3>
                                    <p class="text-sm text-neutral-500 mb-3 line-clamp-2">
                                        天门山是张家界海拔最高的山，因自然奇观天门洞而得名，被誉为"湘西第一神山"。
                                    </p>
                                </div>
                                <div class="p-4 pt-0 flex justify-between items-center">
                                    <div>
                                        <span class="text-neutral-400 text-sm">起价</span>
                                        <span class="text-primary font-semibold ml-1">¥258</span>
                                    </div>
                                    <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                                </div>
                            </div>

                            <!-- 收藏2：芙蓉镇特色吊脚楼酒店（酒店） -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom flex flex-col collection-item" data-category="hotel">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1060/400/200" alt="芙蓉镇特色吊脚楼酒店" class="w-full h-48 object-cover">
                                    <button class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-secondary hover:bg-white transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <div class="p-4 flex-grow">
                                    <div class="flex items-center mb-2">
                                        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded">酒店</span>
                                        <div class="ml-auto flex items-center text-amber-400 text-sm">
                                            <i class="fa fa-star"></i>
                                            <span class="text-neutral-600 ml-1">4.6</span>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-primary mb-1">芙蓉镇特色吊脚楼酒店</h3>
                                    <p class="text-sm text-neutral-500 mb-3 line-clamp-2">
                                        位于芙蓉镇景区内，临瀑布而建的特色吊脚楼，推窗即可欣赏美丽的瀑布景色。
                                    </p>
                                </div>
                                <div class="p-4 pt-0 flex justify-between items-center">
                                    <div>
                                        <span class="text-neutral-400 text-sm">起价</span>
                                        <span class="text-primary font-semibold ml-1">¥328/晚</span>
                                    </div>
                                    <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                                </div>
                            </div>

                            <!-- 收藏3：湘西土家族腊肉（美食） -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom flex flex-col collection-item" data-category="food">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/292/400/200" alt="湘西土家族腊肉" class="w-full h-48 object-cover">
                                    <button class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-secondary hover:bg-white transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <div class="p-4 flex-grow">
                                    <div class="flex items-center mb-2">
                                        <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded">美食</span>
                                        <div class="ml-auto flex items-center text-amber-400 text-sm">
                                            <i class="fa fa-star"></i>
                                            <span class="text-neutral-600 ml-1">4.9</span>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-primary mb-1">湘西土家族腊肉</h3>
                                    <p class="text-sm text-neutral-500 mb-3 line-clamp-2">
                                        采用传统工艺腌制熏制，肉质紧实，香味浓郁，是湘西地区的特色美食。
                                    </p>
                                </div>
                                <div class="p-4 pt-0 flex justify-between items-center">
                                    <div>
                                        <span class="text-neutral-400 text-sm">人均</span>
                                        <span class="text-primary font-semibold ml-1">¥68</span>
                                    </div>
                                    <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                                </div>
                            </div>

                            <!-- 收藏4：张家界3日深度游攻略（攻略） -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom flex flex-col collection-item" data-category="guide">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1051/400/200" alt="张家界3日深度游攻略" class="w-full h-48 object-cover">
                                    <button class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-secondary hover:bg-white transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <div class="p-4 flex-grow">
                                    <div class="flex items-center mb-2">
                                        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded">攻略</span>
                                        <div class="ml-auto flex items-center text-amber-400 text-sm">
                                            <i class="fa fa-star"></i>
                                            <span class="text-neutral-600 ml-1">4.7</span>
                                        </div>
                                    </div>
                                    <h3 class="font-semibold text-primary mb-1">张家界3日深度游攻略</h3>
                                    <p class="text-sm text-neutral-500 mb-3 line-clamp-2">
                                        包含天门山、张家界国家森林公园详细游玩路线，住宿推荐和美食指南。
                                    </p>
                                </div>
                                <div class="p-4 pt-0 flex justify-between items-center">
                                    <div>
                                        <span class="text-neutral-400 text-sm">浏览</span>
                                        <span class="text-neutral-600 ml-1">12.5k</span>
                                    </div>
                                    <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div class="mt-8 flex justify-center">
                            <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-left text-xs"></i>
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-primary text-sm font-medium text-white">
                                    1
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                                    2
                                </a>
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-right text-xs"></i>
                                </a>
                            </nav>
                        </div>
                    </div>

                    <!-- 旅行计划内容区域 -->
                    <div id="itineraries-content" class="p-6 hidden">
                        <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
                            <i class="fa fa-map-o mr-2 text-wood"></i>我的旅行计划
                        </h2>

                        <div class="flex justify-between items-center mb-6">
                            <div class="flex flex-wrap gap-2 border-b border-neutral-200 pb-3">
                                <button class="px-4 py-2 text-primary border-b-2 border-primary font-medium transition-custom" data-filter="all">全部计划</button>
                                <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="upcoming">待出行</button>
                                <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="completed">已完成</button>
                            </div>
                            <button class="batik-btn text-white px-4 py-2 rounded-md hover:bg-accent/90 transition-colors flex items-center">
                                <i class="fa fa-plus mr-2"></i> 创建新计划
                            </button>
                        </div>

                        <!-- 旅行计划列表 -->
                        <div class="space-y-6">
                            <!-- 计划1：张家界5日游 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom itinerary-item" data-status="upcoming">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <h3 class="font-semibold text-primary">张家界5日深度游</h3>
                                        <p class="text-sm text-neutral-500 mt-1">2023-08-20 至 2023-08-24 · 共5天</p>
                                    </div>
                                    <div class="flex gap-3">
                                        <button class="px-3 py-1 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors text-sm">
                                            <i class="fa fa-pencil mr-1"></i> 编辑
                                        </button>
                                        <button class="px-3 py-1 wood-btn text-primary rounded-md hover:opacity-90 transition-colors text-sm">
                                            <i class="fa fa-share-alt mr-1"></i> 分享
                                        </button>
                                    </div>
                                </div>
                                <div class="p-6">
                                    <!-- 行程概览 -->
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                                        <div class="bg-light p-4 rounded-lg">
                                            <div class="flex items-center mb-2">
                                                <i class="fa fa-map-marker text-secondary mr-2"></i>
                                                <h4 class="font-medium">行程地点</h4>
                                            </div>
                                            <p class="text-sm text-neutral-600">张家界国家森林公园、天门山、黄龙洞</p>
                                        </div>
                                        <div class="bg-light p-4 rounded-lg">
                                            <div class="flex items-center mb-2">
                                                <i class="fa fa-bed text-secondary mr-2"></i>
                                                <h4 class="font-medium">住宿安排</h4>
                                            </div>
                                            <p class="text-sm text-neutral-600">张家界碧桂园凤凰酒店（3晚）、市区客栈（1晚）</p>
                                        </div>
                                        <div class="bg-light p-4 rounded-lg">
                                            <div class="flex items-center mb-2">
                                                <i class="fa fa-ticket text-secondary mr-2"></i>
                                                <h4 class="font-medium">已关联订单</h4>
                                            </div>
                                            <p class="text-sm text-neutral-600">景点门票 x 2、酒店 x 1</p>
                                        </div>
                                    </div>

                                    <!-- 每日行程 -->
                                    <h4 class="font-medium text-primary mb-4">每日行程安排</h4>

                                    <!-- 第1天 -->
                                    <div class="itinerary-day mb-6">
                                        <h5 class="font-medium text-neutral-700 mb-3">第1天：抵达张家界</h5>
                                        <div class="space-y-3">
                                            <div class="flex">
                                                <div class="w-20 text-sm text-neutral-500">14:00</div>
                                                <div class="flex-grow">
                                                    <p class="text-sm font-medium">抵达张家界荷花国际机场</p>
                                                    <p class="text-xs text-neutral-500">机场接机至酒店办理入住</p>
                                                </div>
                                            </div>
                                            <div class="flex">
                                                <div class="w-20 text-sm text-neutral-500">18:00</div>
                                                <div class="flex-grow">
                                                    <p class="text-sm font-medium">晚餐：胡师傅三下锅</p>
                                                    <p class="text-xs text-neutral-500">尝试当地特色美食</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 第2天 -->
                                    <div class="itinerary-day mb-6">
                                        <h5 class="font-medium text-neutral-700 mb-3">第2天：张家界国家森林公园</h5>
                                        <div class="space-y-3">
                                            <div class="flex">
                                                <div class="w-20 text-sm text-neutral-500">08:00</div>
                                                <div class="flex-grow">
                                                    <p class="text-sm font-medium">前往张家界国家森林公园</p>
                                                    <p class="text-xs text-neutral-500">游览金鞭溪、袁家界</p>
                                                </div>
                                            </div>
                                            <div class="flex">
                                                <div class="w-20 text-sm text-neutral-500">12:00</div>
                                                <div class="flex-grow">
                                                    <p class="text-sm font-medium">午餐：景区内餐厅</p>
                                                </div>
                                            </div>
                                            <div class="flex">
                                                <div class="w-20 text-sm text-neutral-500">14:00</div>
                                                <div class="flex-grow">
                                                    <p class="text-sm font-medium">游览杨家界、天子山</p>
                                                    <p class="text-xs text-neutral-500">乘坐索道下山</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 查看更多按钮 -->
                                    <div class="text-center">
                                        <button class="text-primary hover:text-secondary transition-colors text-sm">
                                            查看全部行程 <i class="fa fa-chevron-down ml-1"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 计划2：凤凰古城周末游 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom itinerary-item" data-status="completed">
                                <div class="bg-neutral-50 px-6 py-4 flex justify-between items-center border-b border-neutral-200">
                                    <div>
                                        <h3 class="font-semibold text-primary">凤凰古城周末游</h3>
                                        <p class="text-sm text-neutral-500 mt-1">2023-08-12 至 2023-08-13 · 共2天</p>
                                    </div>
                                    <div class="flex gap-3">
                                        <button class="px-3 py-1 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors text-sm">
                                            <i class="fa fa-pencil mr-1"></i> 编辑
                                        </button>
                                        <button class="px-3 py-1 wood-btn text-primary rounded-md hover:opacity-90 transition-colors text-sm">
                                            <i class="fa fa-share-alt mr-1"></i> 分享
                                        </button>
                                    </div>
                                </div>
                                <div class="p-6">
                                    <!-- 行程概览 -->
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                                        <div class="bg-light p-4 rounded-lg">
                                            <div class="flex items-center mb-2">
                                                <i class="fa fa-map-marker text-secondary mr-2"></i>
                                                <h4 class="font-medium">行程地点</h4>
                                            </div>
                                            <p class="text-sm text-neutral-600">凤凰古城、沈从文故居、沱江</p>
                                        </div>
                                        <div class="bg-light p-4 rounded-lg">
                                            <div class="flex items-center mb-2">
                                                <i class="fa fa-bed text-secondary mr-2"></i>
                                                <h4 class="font-medium">住宿安排</h4>
                                            </div>
                                            <p class="text-sm text-neutral-600">凤凰古城临江精品客栈（1晚）</p>
                                        </div>
                                        <div class="bg-light p-4 rounded-lg">
                                            <div class="flex items-center mb-2">
                                                <i class="fa fa-ticket text-secondary mr-2"></i>
                                                <h4 class="font-medium">已关联订单</h4>
                                            </div>
                                            <p class="text-sm text-neutral-600">酒店 x 1、火车票 x 2</p>
                                        </div>
                                    </div>

                                    <!-- 行程回顾 -->
                                    <div class="bg-green-50 p-4 rounded-lg border border-green-100 mb-4">
                                        <div class="flex items-center text-green-600 mb-2">
                                            <i class="fa fa-check-circle mr-2"></i>
                                            <span class="font-medium">此行程已完成</span>
                                        </div>
                                        <p class="text-sm text-neutral-600">您可以添加旅行照片和游记，记录美好回忆</p>
                                        <button class="mt-2 text-green-600 hover:text-green-700 text-sm">
                                            <i class="fa fa-camera mr-1"></i> 上传照片
                                        </button>
                                    </div>

                                    <!-- 查看行程按钮 -->
                                    <div class="text-center">
                                        <button class="px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                                            查看完整行程
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div class="mt-8 flex justify-center">
                            <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-left text-xs"></i>
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-primary text-sm font-medium text-white">
                                    1
                                </a>
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-right text-xs"></i>
                                </a>
                            </nav>
                        </div>
                    </div>

                    <!-- 我的评价内容区域 -->
                    <div id="reviews-content" class="p-6 hidden">
                        <h2 class="text-xl font-semibold text-primary mb-6 flex items-center">
                            <i class="fa fa-comment-o mr-2 text-wood"></i>我的评价
                        </h2>

                        <!-- 评价类型筛选 -->
                        <div class="flex flex-wrap gap-2 mb-8 border-b border-neutral-200 pb-3">
                            <button class="px-4 py-2 text-primary border-b-2 border-primary font-medium transition-custom" data-filter="all">全部评价</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="attraction">景点评价</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="hotel">酒店评价</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="food">美食评价</button>
                            <button class="px-4 py-2 text-neutral-500 hover:text-primary transition-custom" data-filter="travel">旅游团评价</button>
                        </div>

                        <!-- 待评价提醒 -->
                        <div class="bg-primary/5 border border-primary/20 rounded-lg p-4 mb-6">
                            <h3 class="font-medium text-primary mb-2 flex items-center">
                                <i class="fa fa-bell-o mr-2"></i> 待评价提醒
                            </h3>
                            <p class="text-sm text-neutral-600 mb-3">您有2个订单可以评价，分享您的真实体验帮助其他旅行者</p>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="bg-white p-3 rounded border border-neutral-200 flex items-center">
                                    <img src="https://picsum.photos/id/1031/80/80" alt="凤凰古城客栈" class="w-16 h-16 object-cover rounded mr-3">
                                    <div class="flex-grow">
                                        <h4 class="text-sm font-medium">凤凰古城临江精品客栈</h4>
                                        <p class="text-xs text-neutral-500">入住时间：2023-08-15</p>
                                    </div>
                                    <button class="px-3 py-1 batik-btn text-white rounded text-sm">
                                        去评价
                                    </button>
                                </div>
                                <div class="bg-white p-3 rounded border border-neutral-200 flex items-center">
                                    <img src="https://picsum.photos/id/1061/80/80" alt="长沙至张家界高铁" class="w-16 h-16 object-cover rounded mr-3">
                                    <div class="flex-grow">
                                        <h4 class="text-sm font-medium">长沙南 → 张家界西 G6402</h4>
                                        <p class="text-xs text-neutral-500">出行时间：2023-08-18</p>
                                    </div>
                                    <button class="px-3 py-1 batik-btn text-white rounded text-sm">
                                        去评价
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 我的评价列表 -->
                        <div class="space-y-6">
                            <!-- 评价1：天门山国家森林公园 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom review-item" data-category="attraction">
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/55a452dedd2c4e02a067f0c55844e8c4.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1755778193&x-signature=ZplajTTNG3awV2eOE3raNEBImkA%3D" alt="天门山国家森林公园" class="w-full md:w-24 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">天门山国家森林公园</h3>
                                            <div class="flex items-center mb-2">
                                                <div class="star-rating mr-2">
                                                    <div class="star-fill" style="width: 100%">★★★★★</div>
                                                </div>
                                                <span class="text-sm text-neutral-500">5.0 分</span>
                                            </div>
                                            <p class="text-sm text-neutral-600 mb-3">
                                                景色非常壮观！玻璃栈道虽然有点吓人但体验很棒，索道很长可以欣赏到整个张家界的美景。建议早点去避开人流，山上云雾缭绕如同仙境。
                                            </p>
                                            <div class="flex flex-wrap gap-2 mb-3">
                                                <img src="https://picsum.photos/id/1039/60/60" alt="天门山风景" class="w-12 h-12 object-cover rounded">
                                                <img src="https://picsum.photos/id/1036/60/60" alt="天门洞" class="w-12 h-12 object-cover rounded">
                                                <img src="https://picsum.photos/id/1051/60/60" alt="玻璃栈道" class="w-12 h-12 object-cover rounded">
                                            </div>
                                            <div class="flex justify-between items-center text-xs text-neutral-500">
                                                <span>评价时间：2023-08-05</span>
                                                <div class="flex gap-3">
                                                    <button class="hover:text-primary transition-colors">
                                                        <i class="fa fa-thumbs-up mr-1"></i> 有用 (12)
                                                    </button>
                                                    <button class="hover:text-primary transition-colors">
                                                        <i class="fa fa-edit mr-1"></i> 编辑
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 评价2：张家界特色餐厅 -->
                            <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-md transition-custom review-item" data-category="food">
                                <div class="p-6">
                                    <div class="flex flex-col md:flex-row gap-4 mb-4">
                                        <img src="https://picsum.photos/id/292/120/120" alt="张家界特色餐厅" class="w-full md:w-24 h-24 object-cover rounded-md border border-wood/30">
                                        <div class="flex-grow">
                                            <h3 class="font-semibold text-primary mb-1">胡师傅三下锅</h3>
                                            <div class="flex items-center mb-2">
                                                <div class="star-rating mr-2">
                                                    <div class="star-fill" style="width: 80%">★★★★★</div>
                                                </div>
                                                <span class="text-sm text-neutral-500">4.0 分</span>
                                            </div>
                                            <p class="text-sm text-neutral-600 mb-3">
                                                当地很有名的三下锅，味道确实不错，食材新鲜，分量很足。价格也比较实惠，服务态度很好。推荐尝试腊肉三下锅和糯米酸辣子。
                                            </p>
                                            <div class="flex flex-wrap gap-2 mb-3">
                                                <img src="https://picsum.photos/id/292/60/60" alt="三下锅" class="w-12 h-12 object-cover rounded">
                                                <img src="https://picsum.photos/id/431/60/60" alt="当地特色菜" class="w-12 h-12 object-cover rounded">
                                            </div>
                                            <div class="flex justify-between items-center text-xs text-neutral-500">
                                                <span>评价时间：2023-08-04</span>
                                                <div class="flex gap-3">
                                                    <button class="hover:text-primary transition-colors">
                                                        <i class="fa fa-thumbs-up mr-1"></i> 有用 (8)
                                                    </button>
                                                    <button class="hover:text-primary transition-colors">
                                                        <i class="fa fa-edit mr-1"></i> 编辑
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div class="mt-8 flex justify-center">
                            <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-left text-xs"></i>
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-primary text-sm font-medium text-white">
                                    1
                                </a>
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                                    <i class="fa fa-chevron-right text-xs"></i>
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-primary text-white py-12 mt-12 miao-pattern">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <!-- 吊脚楼图标 -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                            <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
                        </svg>
                        <span class="text-xl font-display">湘行</span>
                    </div>
                    <p class="text-neutral-200 text-sm mb-4">
                        专注湘西旅游服务，为您提供高品质的旅游体验
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-200 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-lg"></i>
                        </a>
                        <a href="#" class="text-neutral-200 hover:text-white transition-colors">
                            <i class="fa fa-wechat text-lg"></i>
                        </a>
                        <a href="#" class="text-neutral-200 hover:text-white transition-colors">
                            <i class="fa fa-instagram text-lg"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-semibold mb-4">热门目的地</h3>
                    <ul class="space-y-2 text-neutral-200">
                        <li><a href="#" class="hover:text-white transition-colors">张家界</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">凤凰古城</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">芙蓉镇</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">长沙</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">岳阳楼</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-semibold mb-4">帮助中心</h3>
                    <ul class="space-y-2 text-neutral-200">
                        <li><a href="#" class="hover:text-white transition-colors">订单查询</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">退款政策</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">旅游保险</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-3 text-neutral-200">
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3"></i>
                            <span>400-888-8888</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3"></i>
                            <span>service@xiangxing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>湖南省张家界市永定区子午路158号</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-neutral-600 mt-8 pt-8 text-center text-neutral-300 text-sm">
                <p>© 2023 湘行旅游网 版权所有 | 湘ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 用户下拉菜单交互 - 修复下拉框显示问题
            const userTrigger = document.querySelector('.user-menu-trigger');
            const userDropdown = document.querySelector('.user-dropdown-menu');

            if (userTrigger && userDropdown) {
                // 点击用户头像切换下拉菜单
                userTrigger.addEventListener('click', function(e) {
                    e.stopPropagation();
                    userDropdown.classList.toggle('active');
                });

                // 点击页面其他区域关闭下拉菜单
                document.addEventListener('click', function() {
                    if (userDropdown.classList.contains('active')) {
                        userDropdown.classList.remove('active');
                    }
                });

                // 防止下拉菜单内部点击关闭菜单
                userDropdown.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }

            // 移动端菜单切换
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const closeMobileMenu = document.getElementById('close-mobile-menu');
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');

            if (mobileMenuButton) {
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.remove('translate-x-full');
                    if (mobileMenuOverlay) {
                        mobileMenuOverlay.classList.remove('hidden');
                    }
                    document.body.style.overflow = 'hidden';
                });
            }

            function hideMobileMenu() {
                if (mobileMenu) {
                    mobileMenu.classList.add('translate-x-full');
                }
                if (mobileMenuOverlay) {
                    mobileMenuOverlay.classList.add('hidden');
                }
                document.body.style.overflow = '';
            }

            if (closeMobileMenu) {
                closeMobileMenu.addEventListener('click', hideMobileMenu);
            }

            if (mobileMenuOverlay) {
                mobileMenuOverlay.addEventListener('click', hideMobileMenu);
            }

            // 订单、收藏、行程计划和评价标签切换
            const ordersLink = document.querySelector('a[href="#orders"]');
            const collectionsLink = document.querySelector('a[href="#collections"]');
            const itinerariesLink = document.querySelector('a[href="#itineraries"]');
            const reviewsLink = document.querySelector('a[href="#reviews"]');

            const ordersContent = document.getElementById('orders-content');
            const collectionsContent = document.getElementById('collections-content');
            const itinerariesContent = document.getElementById('itineraries-content');
            const reviewsContent = document.getElementById('reviews-content');

            // 重置所有导航项样式
            function resetNavStyles() {
                const navLinks = [ordersLink, collectionsLink, itinerariesLink, reviewsLink];
                navLinks.forEach(link => {
                    if (link) {
                        link.classList.add('text-neutral-600', 'hover:bg-neutral-100');
                        link.classList.remove('text-primary', 'bg-primary/10', 'font-medium');
                    }
                });
            }

            // 隐藏所有内容区域
            function hideAllContents() {
                ordersContent.classList.add('hidden');
                collectionsContent.classList.add('hidden');
                itinerariesContent.classList.add('hidden');
                reviewsContent.classList.add('hidden');
            }

            if (ordersLink) {
                ordersLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    resetNavStyles();
                    hideAllContents();

                    // 设置当前导航项样式
                    this.classList.add('text-primary', 'bg-primary/10', 'font-medium');
                    this.classList.remove('text-neutral-600', 'hover:bg-neutral-100');

                    // 显示对应内容
                    ordersContent.classList.remove('hidden');

                    // 在移动视图下点击后关闭菜单
                    if (window.innerWidth < 768) {
                        hideMobileMenu();
                    }
                });
            }

            if (collectionsLink) {
                collectionsLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    resetNavStyles();
                    hideAllContents();

                    // 设置当前导航项样式
                    this.classList.add('text-primary', 'bg-primary/10', 'font-medium');
                    this.classList.remove('text-neutral-600', 'hover:bg-neutral-100');

                    // 显示对应内容
                    collectionsContent.classList.remove('hidden');

                    // 在移动视图下点击后关闭菜单
                    if (window.innerWidth < 768) {
                        hideMobileMenu();
                    }
                });
            }

            if (itinerariesLink) {
                itinerariesLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    resetNavStyles();
                    hideAllContents();

                    // 设置当前导航项样式
                    this.classList.add('text-primary', 'bg-primary/10', 'font-medium');
                    this.classList.remove('text-neutral-600', 'hover:bg-neutral-100');

                    // 显示对应内容
                    itinerariesContent.classList.remove('hidden');

                    // 在移动视图下点击后关闭菜单
                    if (window.innerWidth < 768) {
                        hideMobileMenu();
                    }
                });
            }

            if (reviewsLink) {
                reviewsLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    resetNavStyles();
                    hideAllContents();

                    // 设置当前导航项样式
                    this.classList.add('text-primary', 'bg-primary/10', 'font-medium');
                    this.classList.remove('text-neutral-600', 'hover:bg-neutral-100');

                    // 显示对应内容
                    reviewsContent.classList.remove('hidden');

                    // 在移动视图下点击后关闭菜单
                    if (window.innerWidth < 768) {
                        hideMobileMenu();
                    }
                });
            }

            // 通用筛选功能
            const filterButtons = document.querySelectorAll('[data-filter]');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const filter = this.getAttribute('data-filter');
                    const category = this.closest('div').id.includes('collections') ? 'collection-item' :
                                     this.closest('div').id.includes('itineraries') ? 'itinerary-item' :
                                     this.closest('div').id.includes('reviews') ? 'review-item' : 'order-item';

                    // 更新按钮样式
                    this.parentElement.querySelectorAll('button').forEach(btn => {
                        btn.classList.remove('text-primary', 'border-b-2', 'border-primary', 'font-medium');
                        btn.classList.add('text-neutral-500', 'hover:text-primary');
                    });
                    this.classList.remove('text-neutral-500', 'hover:text-primary');
                    this.classList.add('text-primary', 'border-b-2', 'border-primary', 'font-medium');

                    // 筛选项目
                    document.querySelectorAll('.' + category).forEach(item => {
                        if (filter === 'all' || item.getAttribute('data-category') === filter || item.getAttribute('data-status') === filter) {
                            item.style.display = '';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });

            // 滚动时导航栏效果
            window.addEventListener('scroll', function() {
                const header = document.querySelector('header');
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                } else {
                    header.classList.remove('shadow-md');
                }
            });
        });
    </script>
</body>
</html>
